<template>
  <div>
    <Back :title="$t('AddVolume_createDataVolume')"></Back>
    <el-form :model="form" ref="ruleForm" label-width="130px" class="demo-ruleForm" style="padding: 10px 10px 1px 10px; margin-top: 20px">
      <el-form-item :label=" $t('AddVolume_dataVolumeName')" prop="name">
        <el-input v-model="form.name" :placeholder="$t('AddVolume_plsInputDataVolumeName')"></el-input>
      </el-form-item>
    </el-form>

    <el-form :model="form" ref="ruleForm" label-width="130px" class="demo-ruleForm from">
      <div class="title">
     {{ $t('AddVolume_driverSettings')}}
      </div>
      <el-form-item :label="  $t('AddVolume_driver')" prop="Driver" v-if="systeminfo">
        <el-select v-model="form.Driver" :placeholder="  $t('AddVolume_plsSelectDriver') ">
          <el-option :label="item" :value="item" v-for="item in systeminfo.Plugins.Volume" :key="item"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item :label="  $t('AddVolume_driverOptions')" prop="isSynchronize">
        <el-button icon="iconfont icon-add" class="submit" size="mini" style="margin-left: 0" @click="addPort">添加</el-button>
      </el-form-item>
      <el-form-item label="" prop="options" v-for="(item, index) in portNum" :key="item">
        <el-input :placeholder="  $t('AddVolume_plsInputName')" v-model="form.options[index].name" style="width: 40%;">
          <template slot="prepend">name</template>
        </el-input>
        <el-input :placeholder=" $t('AddVolume_plsInputValue')" v-model="form.options[index].value" style="width: 40%;margin-left: 20px;">
          <template slot="prepend">value</template>
        </el-input>
        <el-button @click="delPort(item, index)" title="  $t('AddVolume_delete')" type="danger" icon="iconfont icon-lajitong" style="margin-left: 10px; padding: 10px;" size="mini"></el-button>
      </el-form-item>
      <el-form-item :label="  $t('AddVolume_useNFSVoulume')" prop="isNFS">
        <el-switch v-model="form.isNFS" disabled title="  $t('AddVolume_functionImproving')"></el-switch>
      </el-form-item>
    </el-form>
    <el-form :model="form" ref="ruleForm" label-width="50px" class="demo-ruleForm" style="padding: 10px 10px 1px 10px">
      <el-form-item label="">
        <el-button style="background: #067FB5; color: #fff;" size="small" @click="onSubmit"> {{ $t('AddVolume_createNow')}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue'
import { Form, FormItem, Input, Button, Switch, Select, Option } from 'element-ui'
import post from '@/utils/post'
import Back from '@/components/Back'
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Button)
Vue.use(Switch)
Vue.use(Select)
Vue.use(Option)

export default {
  data () {
    return {
      systeminfo: null, // 系统数据
      form: {
        name: '', // 数据卷名
        Driver: 'local', // 驱动
        options: [], // 驱动选项
        isNFS: false // 是否为NFS卷，功能待完善
      },
      portNum: [], // 驱动选项匹配的数据。用于准确删除，添加驱动选项
      i: 0 // 标识
    }
  },
  mounted () {
    // 请求关于系统的数据
    const docker = 'curl --unix-socket /var/run/docker.sock -s "http:/v1.40/info"'
    post({ docker }, (res) => {
      this.systeminfo = res
    }, this)
  },
  methods: {
    // 添加开options的input框
    addPort () {
      this.portNum.push(this.i)
      this.form.options.push({ name: '', value: '' })
      this.i++
    },
    // 删除options的input框
    delPort (item, index) {
      this.portNum = this.portNum.filter(data => {
        return data !== item
      })
      this.form.options.splice(index, 1)
    },
    // 处理创建
    onSubmit () {
      let DriverOpts = {}
      if (this.form.options.length > 0) {
        for (let a = 0; a < this.form.options.length; a++) {
          DriverOpts[this.form.options[a].name] = this.form.options[a].value
        }
      }
      let data = {
        Name: this.form.name,
        Driver: this.form.Driver,
        DriverOpts
      }
      const docker = `curl --unix-socket /var/run/docker.sock -s -H Content-Type:application/json -d '${JSON.stringify(data)}' http:/v1.40/volumes/create` // 创建数据卷
      post({ docker }, res => {
        if (res.message) {
          return this.$message({
            showClose: true,
            message: res.message,
            type: 'error'
          })
        }
        this.$message({
          showClose: true,
          message:   this.$t('AddVolume_createDataVolumeSuccess'),
          type: 'success'
        })
        this.$router.go(-1)
      }, this)
    }
  },
  components: {
    Back
  }
}
</script>

<style lang="scss" scoped>
.from{
  border: 1px solid #067FB5;
  border-radius: 15px;
  padding: 20px 10px 0px 10px;
  margin: 20px 0px;
  background: #F7FCFF;
  position: relative;
  .title{
    position: absolute;
    top: -14px;
    z-index: 10;
    left: 30px;
    font-size: 18px;
    font-weight: bold;
    background: #F7FCFF;
    padding: 0px 5px;
    border-radius: 5px;
  }
}
.submit{
  background: #067FB5;
  color: #fff;
  margin-left: 30px;
}
</style>
